<template>
	<view>


		<view class="ttx" style="background-color:{{color}};">

		

			<text class="example-info">实时盈亏估算：{{fundvaue}}</text>
		</view>


		<uni-section title="今日预估" type="line">
	<span >共{{zhang +die}}只</span>其中涨<span style="color:#ff0000">{{zhang }}</span> ，跌<span style="color:#007AFF">{{die}}。</span>
		</uni-section>
		<uni-swipe-action>

		<!-- #ifdef MP-QQ -->
			<view class="adContainer">
				<ad unit-id="49fbbff61639d5c62ace1745f1f019b0" type="feeds"></ad>
			</view>
			<!-- #endif  -->

			<!-- #ifdef MP-WEIXIN  -->
			<view>
				<ad unit-id="adunit-d0afedca1cfb4087" ad-type="video" ad-theme="white"></ad>
			</view>
			<!-- #endif  -->

			<uni-swipe-action-item class="article shadow clearfix sr-listshow" v-for="(item,index) in swipeList"
				:options="options" :key="item.id" @change="swipeChange" @click="swipeClick($event,index)">

				<view class="article-right" style="width: 100%; margin: 10px;">
					<view class="article-title">
						<span>{{item.name}}</span>
					</view>
					<view class="article-footer">
						<span>更新日期：{{item.gztime}}</span>
						<span>单位净值：{{item.dwjz}}</span>
					</view>
					<view class="article-footer">
						<span v-if="item.sy.indexOf('-')>=0" style="color:#0250ff">估值：↓{{item.gsz}}%</span>
						<span v-if="item.sy.indexOf('-')<0" style="color:#ff0000">估值：↑{{item.gsz}}%</span>
						<span v-if="item.sy.indexOf('-')>=0" style="color:#0250ff"
							class="article-viewinfo">预估收益：↓{{item.sy}}</span>
						<span v-if="item.sy.indexOf('-')<0" style="color:#ff0000"
							class="article-viewinfo">预估收益：↑{{item.sy}}</span>
					</view>
				</view>

			</uni-swipe-action-item>
		
		</uni-swipe-action>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />

		<!-- 弹窗 -->
		<uni-popup :show="showDailog" type="center" :custom="true" :mask-click="false" @change="change">
			<view class="uni-tip">
				<form @submit="formSubmit" ref="form">
					<input class="uni-input" v-model="id" name="id" style="display: none;" placeholder="请输入基金代码" />
					<input class="uni-input" v-model="userid" name="userid" style="display: none;"
						placeholder="请输入基金代码" />

					<view class="uni-form-item uni-column">
						<view class="title">基金代码：</view>
						<input class="uni-input" v-model="code" maxlength="6" name="code" type="digit"
							placeholder="请输入基金代码" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">计算份额：</view>
						<input class="uni-input" v-model="fe" name="fe" type="digit" placeholder="请输入计算份额" />
					</view>
					<view class="uni-btn-v">
						<button form-type="submit">确定</button>
						<button type="default"  @click="formReset">关闭</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import uniPopup from '@/components/asxsyd92/uni-dialog.vue' // 自定义弹窗组件
	import common from '@/common/common.js';
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	export default {
		components: {

			uniPopup

		},
		data() {
			return {
				showDailog: false, // 是否显示弹窗
				code: '', fe: '', userid: '', id: '' // 回退原因
				, addcs:0,
				title: 'nav-default',
		zhang:0,die:0,
				fundvaue: 0,
				color: "#ff0000",
				avatar: "",
				swipeList: [], options: [{
					text: '删除',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '修改',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				content: [{
					text: '新增',
					active: false,
					iconPath: '/static/ico_23.png',
					selectedIconPath: '/static/ico_23_s.png',
				},
				{
					text: '刷新',
					active: false,
					iconPath: '/static/ico_21.png',
					selectedIconPath: '/static/ico_21_s.png',
				}
					,
				{
					text: '帮助',
					active: false,
					iconPath: '/static/ico_18.png',
					selectedIconPath: '/static/ico_18_s.png',
				}
				]

			}
		}, onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods: {


			onPullDownRefresh() {
				console.log('refresh');
				this.addcs = this.addcs + 1;
				if (this.addcs > 3) {
				
					this.showadd();

				}else{
					this.getfund();
				}

			},
			formSubmit: function (e) {
				var _this = this;
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				if (formdata.code.length <= 0) {
					uni.showToast({
						title: "代码有误，请重新输入！",
						icon: 'none'
					});
					return false;
				} if (formdata.code.length != 6) {
					uni.showToast({
						title: "代码有误，请重新输入！",
						icon: 'none'
					});
					return false;
				}

				if (formdata.fe.length <= 0) {
					uni.showToast({
						title: "请填写份额！",
						icon: 'none'
					});
					return false;
				}
				formdata.userid = uni.getStorageSync("userid");
				common.requst(_this.URLs + '/api/applets/fundsave', { data: JSON.stringify(formdata) }, 'post').then(res => {
					if (res.statusCode == 200) {
						if (res.data.success) {
							this.showDailog = false;
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							this.getfund();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					}
				});
			},
			formReset: function (e) {
				this.showDailog = false;
				console.log('清空数据')
			},


			/** 监听弹窗状态是否打开 */
			change(e) {
				console.log(e.show)
			},

			trigger(e) {
				let _this = this;
				this.content[e.index].active = !e.item.active;
				if (e.index == 0) {
					this.showDailog = true;
				}
				if (e.index == 1) {
					_this.showadd();
				}
				if (e.index == 2) {
					uni.showModal({
						content: "1.本工具根据基金实时估算计算器，与实际收益存在差异。点击左下方+，添加需要估算的基金代码和基金份额，确定后可实时查看。2.本工具只提供估算计算与基金交易无关。不支持实时估值的基金不能进行计算。3.添加后右划可编辑或者删除。",
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
							}
						}
					});
				}
			},
			fabClick() {

			},
			showadd() {
				uni.showModal({
					title: '温馨提示',
					content: '刷新需要消耗网络资源进行重新计算，观看一段视频可免费计算一次',
					success: (res) => {
						if (res.confirm) {
							//#ifdef MP-WEIXIN 
							// 在页面中定义激励视频广告
							let videoAd = null

							// 在页面onLoad回调事件中创建激励视频广告实例
							if (wx.createRewardedVideoAd) {
								videoAd = wx.createRewardedVideoAd({
									adUnitId: 'adunit-c87b893841314c19'
								})
								videoAd.onLoad(() => { })
								videoAd.onError((err) => { })
								videoAd.onClose((res) => {
									if (res.isEnded) {
										_this.getfund();
								

									} else {
										uni.showToast({
											title: "请看完完整视频",
											icon: 'none'
										})
									}
								})
							}

							// 用户触发广告后，显示激励视频广告
							if (videoAd) {
								videoAd.show().catch(() => {
									// 失败重试
									videoAd.load()
										.then(() => videoAd.show())
										.catch(err => {
											console.log('激励视频 广告显示失败')
										})
								})
							}
							//#endif
							// #ifdef MP-QQ 
							this.videoAd = qq.createRewardedVideoAd({ adUnitId: "d00f62fd84ad12b93644447ab012b9ac" });
							this.videoAd.onError(function (res) { console.log('videoAd onError', res) });
							this.videoAd.onLoad(function (res) { console.log('videoAd onLoad', res) });
							this.videoAd.onClose(function (res) {
								if (res.isEnded) {

									_this.getfund();



								} else {
									uni.showToast({
										title: "请看完完整视频",
										icon: 'none'
									})

								}
								console.log('videoAd onClose', res)
							});
							this.videoAd.load().then(() => {
								console.log('激励视频加载成功');
								this.videoAd.show().then(() => { console.log('激励视频 广告显示成功') })
									.catch(err => { console.log('激励视频 广告显示失败') })
							})
								.catch(err => { console.log('激励视频加载失败'); })

							console.log('点击确认');
							//	#endif

						} else {

						}


					}

				});
			}
			,
			switchBtn(hor, ver) {
				if (hor === 0) {
					this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
					this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
				} else {
					this.horizontal = hor
					this.vertical = ver
				}
				this.$forceUpdate()
			},
			onLoad() {
				var tip = uni.getStorageSync("tip");
				if (tip == null || tip == undefined || tip == "") {
					uni.showModal({
						content: "1.本工具根据基金实时估算计算器，与实际收益存在差异。点击左下方+，添加需要估算的基金代码和基金份额，确定后可实时查看。2.本工具只提供估算计算与基金交易无关。不支持实时估值的基金不能进行计算",
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								uni.setStorageSync("tip", 1);
							}
						}
					});
				}
				let _this = this;
				var openid = uni.getStorageSync("openid");
				if (openid == null || openid == undefined || openid == "") {
					uni.reLaunch({//信息更新成功后跳转到小程序首页
						url: '/pages/login/login'
					});
				}
					 	 var userid=  uni.getStorageSync("userid");
		 if(userid==null||userid==undefined||userid==""){
			       uni.reLaunch({//信息更新成功后跳转到小程序首页
                                url: '/pages/login/login'
              });
		 }
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ff0000',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
				this.avatar = uni.getStorageSync("avatar");
				this.getfund();




			},
			getfund() {
				var userid = uni.getStorageSync("userid");
				var _this = this;
				common.requst(_this.URLs + '/api/applets/fund', { userid: userid }, 'post').then(res => {
					console.log(res);
					console.log(res.data);
					if (res.statusCode == 200) {
                       uni.stopPullDownRefresh();
						this.swipeList = res.data.data
						if (res.data.success) {
							this.fundvaue = res.data.ygsy;
							this.zhang=res.data.zhang;
							this.die=res.data.die;
						}
						if (this.fundvaue >= 0) {
							uni.setNavigationBarColor({
								frontColor: '#ffffff',
								backgroundColor: '#ff0000',
								animation: {
									duration: 400,
									timingFunc: 'easeIn'
								}
							})
						}
						else {
							this.color = '#0250ff'
							uni.setNavigationBarColor({
								frontColor: '#ffffff',
								backgroundColor: '#0250ff',
								animation: {
									duration: 400,
									timingFunc: 'easeIn'
								}
							})
						}
					} else {
						   uni.stopPullDownRefresh();
						uni.showToast({
							title: "网络错误",
							icon: 'none'
						})
					}

				});
			}
			,
			swipeChange(e) {
				console.log('返回：', e);
			},
			swipeClick(e, index) {
				let {
					content
				} = e


				if (content.text === '删除') {
					var data = this.swipeList[index];
					var userid = uni.getStorageSync("userid");
					var _this = this;
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: (res) => {
							if (res.confirm) {
								common.requst(_this.URLs + '/api/applets/funddel', { id: data.id, userid: userid }, 'post').then(res => {
									console.log(res);
									console.log(res.data);
									if (res.statusCode == 200) {

										this.swipeList = res.data.data
										if (res.data.success) {
											this.getfund();
										}
										else {
											uni.showToast({
												title: res.data.msg,
												icon: 'none'
											})
										}
									} else {
										uni.showToast({
											title: "网络错误",
											icon: 'none'
										})
									}

								});

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (content.text === '修改') {
					this.showDailog = true;
					var data = this.swipeList[index];
					this.id = data.id; this.userid = data.userid; this.fe = data.fe; this.code = data.code;
				} else {




				}
			}
		}
	}
</script>

<style>
	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.ttx {

		background-color: #ff0000;
		text-align: -webkit-center;
		text-align: right;
		height: 124px;
	}


	.example-info {
		    margin: 10px;
		color: #fff;
		line-height: 25px;
		font-weight:bold;
		font-size: 20px;
		color: #fff;
position: relative;
top: 25%;
	}

	.uni-badge {
		width: 50px;
	}

	.message {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 15px 0;
	}

	.cont {
		flex: 1;
		height: 45px;
		line-height: 45px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		font-size: 15px;
		border-bottom-color: #F5F5F5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	/* 提示窗口 */
	.uni-tip {
		padding: 15px;
		width: 300px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
		text-align: left;
	}

	.uni-tip-content {
		padding: 15px;
		font-size: 14px;
		color: #666;
		/* background: #C8C7CC; */
		border: 2upx solid #ccc;
		border-radius: 10upx;
	}


	.uni-tip-group-button {
		margin-top: 10px;
		display: flex;
	}

	.uni-tip-group-button>button {
		font-size: 24upx;
		height: 40upx;
		line-height: 40upx;

	}
</style>